<template>
	<div class="cmp-imitate">
		<div class="cont-title">
			模拟考试
		</div>
		<div class="imitate-nav">
			<div class="imitate-nav-item">
				<div class="nav-title">
					<span>考点练习</span>
					<div class="nav-btn" @click="points">进入</div>
				</div>
				<div class="nav-intro">根据题库提供的考点进行逐一练习</div>
			</div>
			<div class="imitate-nav-item">
				<div class="nav-title">
					<span>自由组卷</span>
					<div class="nav-btn" @click="free">进入</div>
				</div>
				<div class="nav-intro">从总体题库中，根据设置的单选多选数量随机</div>
			</div>
			<!-- 		<div class="imitate-nav-item">
				<div class="nav-title">
					<span>仿真测验</span>
					<div class="nav-btn">进入</div>
				</div>
				<div class="nav-intro">根据大赛的试卷要求进行抽取试题组卷</div>
			</div> -->
		</div>
		<div class="cont-title">
			测试记录
		</div>
		<div class="test-list">
			<div class="test-item" v-for="item in list">
				<div class="test-intro">
					<div class="test-name">{{item.title}}</div>
					<div class="test-time">
						<span class="time-text">最后一次测试时间：2099-09-09</span>
						<div class="time-tag">
							<div class="tag-icon">
								<img src="../assets/img/question_icon1.png" alt="">
							</div>
							<span>共{{item.allCount}}道</span>
						</div>
						<div class="time-tag">
							<div class="tag-icon">
								<img src="../assets/img/question_icon2.png" alt="">
							</div>
							<span>共{{item.errorCount}}道</span>
						</div>
					</div>
				</div>
				<div class="test-btn" @click="goTest(item)">再来一次</div>
			</div>
		</div>
		<div class="page-cont">
			<el-pagination :page-size="pageSize" :hide-on-single-page="true" background layout="prev, pager, next"
				:total="total" @current-change="pageNumChange">
			</el-pagination>
		</div>
		<el-dialog title="考点方向" width="600px" :visible.sync="selectDirShow">
			<div class="tags">
				<el-tag v-for="item in dir" :key="item.dictValue" :effect="selectDir==item.dictValue? 'dark': 'plain'"
					@click="tagSelect(item)">
					{{ item.dictLabel }}
				</el-tag>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button size="mini" @click="selectDirShow = false">取 消</el-button>
				<el-button size="mini" type="primary" @click="selectDirFn">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import {
		getSimulationListApi,
		getSimulationDirApi
	} from '@/api/Match'
	export default {
		data() {
			return {
				pageNum: 1,
				pageSize: 10,
				list: [],
				total: 0,
				dir: [],
				selectDir: '',
				selectDirShow: false,
				imitateType: 1
			}
		},
		created() {
			this.getList()
			this.getDir()
		},
		methods: {
			free() {
				this.selectDirShow = true
				this.imitateType = 3
			},
			points() {
				this.selectDirShow = true
				this.imitateType = 2
			},
			tagSelect(item) {
				this.selectDir = item.dictValue
			},
			selectDirFn() {
				if (!this.selectDir) {
					this.$message.error('请选择考点方向')
					return false
				}
				this.$emit('dirChange', this.selectDir)
				this.$emit('imitateType', this.imitateType)
				this.selectDirShow = false
			},
			getDir() {
				getSimulationDirApi().then(res => {
					this.dir = res.data
				})
			},
			pageNumChange(index) {
				this.pageNum = index
				this.getList()
			},
			goTest(item) {
				console.log(item)
				return
				this.$router.push({
					path: '/Exam',
					query: {
						id: item.recId
					}
				})
			},
			getList() {
				getSimulationListApi({
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then(res => {
					this.list = res.rows
					this.total = res.total
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	.cmp-imitate {
		padding: 0 60px;

		.cont-title {
			padding: 30px 0 15px;
			border-bottom: 1px solid rgba(151, 151, 151, 0.2);
			font-size: 16px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #000000;
			line-height: 22px;
		}

		.imitate-nav {
			display: flex;
			padding-top: 17px;
		}

		.imitate-nav-item {
			flex: 1;
			border-radius: 6px;
			overflow: hidden;
			height: 116px;
			padding: 10px 20px;

			&:not(:last-child) {
				margin-right: 20px
			}

			&:nth-of-type(1) {
				background: #D8D8D8 linear-gradient(180deg, #7535FF 0%, #BA7DFF 100%);

			}

			&:nth-of-type(2) {
				background: linear-gradient(180deg, #4162FF 0%, #35CCFF 100%);
			}

			&:nth-of-type(3) {
				background: #D8D8D8 linear-gradient(180deg, #09B693 0%, #47FFC9 100%);
			}
		}

		.nav-title {
			margin-bottom: 11px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 18px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		.nav-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 58px;
			height: 33px;
			background: #FE7C3E;
			border-radius: 4px;
			font-size: 15px;
			cursor: pointer;
		}

		.nav-intro {
			font-size: 14px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #FFFFFF;
		}

		.test-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30px 0;
			border-bottom: 1px solid rgba(151, 151, 151, 0.2);
		}

		.test-name {
			font-size: 18px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-bottom: 22px;
		}

		.test-time {
			display: flex;
			align-items: center;
			font-size: 12px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #666666;
			line-height: 17px;
		}

		.time-text {
			margin-right: 68px;
		}

		.time-tag {
			display: flex;
			align-items: center;
			margin-left: 18px;
		}

		.tag-icon {
			width: 16px;
			height: 16px;
			margin-right: 4px;
		}

		.test-btn {
			width: 89px;
			height: 34px;
			background: #2360FE;
			border-radius: 17px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 14px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 500;
			color: #FFFFFF;
			cursor: pointer;
		}

		.page-cont {
			padding: 77px 0 74px;
			display: flex;
			justify-content: center;
		}

		.el-pagination.is-background .el-pager li:not(.disabled).active {
			background-color: #2360FE;
		}

		.el-tag {
			margin: 0 10px;
		}
	}
</style>